<template>
  <div class="big-background" >
  <div class="layout">
    <el-tabs type="border-card">
      <el-tab-pane label="登录">
        <el-form
            label-position="right"
            label-width="60px"
            style="max-width: 460px;"
            class="loginForm"

        >
          <el-form-item label="邮箱：">
            <el-input v-model="userName" />
          </el-form-item>
          <el-form-item label="密码：">
            <el-input type="password" v-model="password" />
          </el-form-item>

          <el-row>
            <el-checkbox
                class="checkBox"
                v-model="nickName"
                label="同意用户使用准则"
                name="type"
            />
          </el-row>
          <el-button
              v-if="nickName"
              type="primary"
              class="loginBtn"
              @click="login"
          >
            登录
          </el-button>
        </el-form>
      </el-tab-pane>

     </el-tabs>
  </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup() {
    const router=useRouter()
    const store = useStore()
    const form = reactive({
      userName: "",
      password: "",
      nickName: 0,
    });
    const registerForm = reactive({
      rEmail: "",
      rPassword: "",
      confirmPassword: "",
      identifyCode: "",
      rAgree: 0,
    });

    // 方法
    // 登录
    function login() {

      const url = `http://localhost:1688/login/user`;
      let formData =new FormData();
      formData.append("user",form.userName)
      formData.append("password",form.password)
      axios.post(url,formData).then((data)=>{
        const  userData = {
          data:data.data.data,
          token:data.data.data.token,
        }
        store.commit("saveUser", userData);
        console.log(userData,"fgg")
        if(userData.token!==undefined){

          console.log("登录成功")
          router.push("/parson")

        }else{
          console.log("登录失败")
        }
      },error =>{
        sessionStorage.clear()
        console.log(error,"登录失败")
      });
    }
    // 注册
    function register() {
      console.log("注册", registerForm);
    }
    // 获取验证码
    function getIdentifyCode() {
      console.log("获取验证码");
    }
    // 确认密码
    // function confirmFunc() {
    //   if (registerForm.confirmPassword !== registerForm.rPassword)
    //     alert("密码与确认密码不一致");
    // }
    const confirmFunc = () => {
      if (registerForm.confirmPassword !== registerForm.rPassword)
        ElMessage.error("密码与确认密码不一致.");
    };
    return {
      ...toRefs(form),
      ...toRefs(registerForm),
      login,
      register,
      getIdentifyCode,
      confirmFunc,
    };
  },
};
</script>

<style scoped>

.big-background{
  width: 100%;
  height: 100%;
  background: url("./src/assets/backg.jpg");
  background-size: 100% 100%;
}
.layout {
  position: absolute;
  left: calc(50% - 200px);
  top: 20%;
  width: 400px;


}
.loginBtn {
  width: 100px;

}
.loginForm {
  text-align: center;
}
.checkBox {
  margin-left: 7px;
}

</style>
